Vue.component('nav-top-bar', {
    data: function () {
        return {
            currenTitle: document.title,
            isShow: false
        }
    },
    props: ['golink', 'linktitle'],
    template: `
      <div class="nav-top-bar flex flex-align-center">
            <a class="go-link" :href="golink" @click="back">
                <i class="iconfont icon-angle-left"></i>
            </a>
            <h2 class="link-title flex-1">{{ linktitle || currenTitle }}</h2>
            <div class="more-link">
                <div class="more-icon" @click = "toggleShow"><i class="iconfont icon-more"></i></div>
                <div :class="isShow ? 'more-link-content link-open' : 'more-link-content'">
                    <i class="arrow-up iconfont icon-arrowupb"></i>
                    <ul class="link-list">
                        <li class="link-list-li">
                            <a href="/">首页</a>
                        </li>
                        <li class="link-list-li">
                            <a href="/fenlei.html">分类</a>
                        </li>
                        <li class="link-list-li">
                            <a href="/xuexi.html">学习</a>
                        </li>
                        <li class="link-list-li">
                            <a href="/wode.html">我的</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
      `,
    created() {
        var _this = this;
        // document.onclick = function (e) {
        //     var len = document.getElementsByClassName('link-open').length;
        //     console.log('8758' + len);
        //     console.log(e);
        //     // len ? _this.isShow = false : '';
        //     // _this.isShow = _this.isShow ? false : '';
        // }
    },
    watch: {

    },
    methods: {
        back() {
            if (!this.golink) {
                if (history.length > 0) {
                    history.go(-1);
                } else {
                    location.href = '/';
                }
            }
        },

        toggleShow() {
            var _this = this;
            if (!_this.isShow) {
                _this.isShow = !_this.isShow;
                var showTime = setTimeout(function () {
                    _this.isShow = _this.isShow ? false : '';
                }, 3000);
            }
        }
    },
})
